<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="zhu">
        <div class="datu"></div>
        <div class="xiaotu">
            <ul class="lists">
                <li class="a"></li>
                <li class="b"></li>
                <li class="c"></li>
                <li class="d"></li>
                <li class="e"></li>
                <li class="f"></li>
                <li class="g"></li>
                <li class="h"></li>
            </ul>
        </div>
    </div>
    </body>
    <style>
        body{
            background-color: rgb(238, 238, 238);
        }
        .datu:hover{
            box-shadow: 10px 10px 10px #a5a3a3,5px -5px 10px #a5a3a3,-5px 10px 10px #a5a3a3,-5px -5px 10px #a5a3a3 ;
        }
        .datu{
            background: url(./大图.jpg);
            width: 233px;
            height: 610px;
        }
        .lists{
            list-style: none;
            background-color: #000;
            margin: 0px;
            padding: 0px;
            width: 1000px;
        }
       .a:hover{
            box-shadow: 10px 10px 10px #a5a3a3,5px -5px 10px #a5a3a3,-5px 10px 10px #a5a3a3,-5px -5px 10px #a5a3a3 ;
        }
        .b:hover{
            box-shadow: 10px 10px 10px #a5a3a3,5px -5px 10px #a5a3a3,-5px 10px 10px #a5a3a3,-5px -5px 10px #a5a3a3 ;
        }
        .c:hover{
            box-shadow: 10px 10px 10px #a5a3a3,5px -5px 10px #a5a3a3,-5px 10px 10px #a5a3a3,-5px -5px 10px #a5a3a3 ;
        }
        .d:hover{
            box-shadow: 10px 10px 10px #a5a3a3,5px -5px 10px #a5a3a3,-5px 10px 10px #a5a3a3,-5px -5px 10px #a5a3a3 ;
        }
        .e:hover{
            box-shadow: 10px 10px 10px #a5a3a3,5px -5px 10px #a5a3a3,-5px 10px 10px #a5a3a3,-5px -5px 10px #a5a3a3 ;
        }
        .f:hover{
            box-shadow: 10px 10px 10px #a5a3a3,5px -5px 10px #a5a3a3,-5px 10px 10px #a5a3a3,-5px -5px 10px #a5a3a3 ;
        }
        .g:hover{
            box-shadow: 10px 10px 10px #a5a3a3,5px -5px 10px #a5a3a3,-5px 10px 10px #a5a3a3,-5px -5px 10px #a5a3a3 ;
        }
        .h:hover{
            box-shadow: 10px 10px 10px #a5a3a3,5px -5px 10px #a5a3a3,-5px 10px 10px #a5a3a3,-5px -5px 10px #a5a3a3 ;
        }
        li{
            width: 230px;
            height: 298px;
            margin-left: 15px;
            margin-bottom: 15px;
            float: left;
        }
        .a{
            background:url(./a.png);
        }
        .b{
            background: url(./b.png);
        }
        .c{
            background: url(./c.png);
        }
        .d{
            background: url(./4.jpg);
        }
        .e{
            background: url(./5.jpg);
        }
        .f{
            background: url(./6.jpg);
        }
        .g{
            background: url(./7.jpg);
        }
        .h{
            background: url(./8.jpg);
        }
        div{
            float: left;
        }
        .zhu{
            padding: 30px 0px 0px 180px;
        }
    </style>
</body>
</html>